<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>登录系统</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="full-screen" content="yes"/>
    <meta name="browsermode" content="application"/>
    <meta name="x5-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="x5-page-mode" content="app"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"/>
    <link rel="stylesheet" href="./resources/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./resources/css/bootstrap-vue.min.css"/>
    <style type="text/css">
     .login-panel{
       margin-top: 40%;
     }
    </style>
  </head>
<body class="bg-light">
<div id="app" class="container " >
 <div class="row">
     <div class="col-sm-4 mx-auto">
         <div class="login-panel card">
             <div class="card-header">
                 <h3 >登录</h3>
             </div>
             <div class="card-body">
                 <form  id="formLogin" method="post">
                     <fieldset>
                         <div class="form-group">
                             <input class="form-control" placeholder="用户名" name="username" id="username" type="text"     v-on:keyup.enter="login" v-model.trim="userid" autofocus>
                         </div>
                         <div class="form-group">
                             <input class="form-control" placeholder="密码"  name="password"  id="password" type="password" v-on:keyup.enter="login" v-model.trim="password">
                         </div>
                         <button type="button" class="btn btn-primary btn-lg btn-block" @click="login">登录</button>
                     </fieldset>
                 </form>
             </div>
         </div>
     </div>
 </div>
</div>
<!-- end 添加模板  -->
<script src ="./resources/js/vue.min.js"></script>
<script src ="./resources/js/bootstrap-vue.min.js"></script>
<script src ="./resources/js/axios.min.js"></script>
<script src ="./resources/js/vue-axios.min.js"></script>
<script src ="./resources/js/app.js"></script>

<script type="text/javascript">
new Vue({
	   el   : '#app'
	  ,data :{
		   userid:'admin'
		  ,password:'123456'
	  }
	  ,mounted:function (){
	  }
	  ,methods :{
		  login:function (){
			    if(!this.userid ){
			    	this._toast("用户名不能为空!");
			    	return ;
			    }
			    if(!this.password  ){
			    	this._toast("密码不能为空!");
			    	return ;
			    }
			    this.$http.post('login/test', {userid:this.userid,password:this.password })
			    .then((result) =>{
			        var user=result.user;
			        //保存用户信息
			        //AppContext.setUser(user);
			        //跳转
			        window.location.href='main.html';
			    });
			    
		  }
	  }
	});
</script>
</body>
</html>
